<template>
	<div>
	<body  v-loading.fullscreen.lock="fullscreenLoading">
			<section>
				<div class="top-search">
					<div class="wrapper search">
						<div class="flex-row">
							<div class="flex-col-3"></div>
							<div class="flex-col-18">
								<div class="search-box">
									<form class="input-search">
										<div class="input-prepend">
											<select name="" class="search-type">
												<option value="1">手机</option>
												<option value ="2">电脑</option>
											</select>
										</div>
										<input type="search" v-model="keyword" list="ls" class="input-inner" placeholder="请输入关键字" />
									<datalist id="ls">
										<option value ="HuaWei"></option>
										<option value ="Mac"></option>
										<option value ="手机"></option>
										<option value ="电脑"></option>
									</datalist>
									<div class="input-append">
										<button type="button" @click="search(keyword)" class="btn">
											<i class="iconfont icon-sousuo"></i>
										</button>
									</div>
									</form>
								</div>
							</div>
							<div class="flex-col-3"></div>
						</div>
					</div>
				</div>
				<div class="body-notice">
					<div class="wrapper carousel">
						<div class="flex-row">
							<div class="flex-col-24  body-notice-img">
								<div class="body-notice-p">
									<p><i class="iconfont icon-gonggao"></i>公告</p>
								</div>
                <el-carousel height="100px">
                  <el-carousel-item v-for="item in 3" :key="item">
                    <h3 class="small justify-center" text="2xl"><img src="@/assets/img/55bd342ebc6b4a47880573d1e3301aec.png"></h3>
                  </el-carousel-item>
                </el-carousel>
							</div>
						</div>
					</div>
				</div>
			</section>
			<main>
				<div class="body-shop">
					<div class="wrapper shop">
						<div class="body-shop1-title">
							<h1>可以永远相信我们的产品。</h1>
							<div class="flex-row product1">
                <!--嘻嘻嘻-->
								<div class="flex-col-8 android" v-for="list in cowryListByOne" :key="list.id">
									<img :src="'/src/' + list.imgPath" style="width:200px; height:200px"/>
									<p><a href="#">{{ list.name }}</a></p>
								</div>
                <!--嘻嘻嘻-->
							</div>
						</div>
						<div class="body-shop2-title">
							<h1>一个属于只我们的商城。</h1>
							<div class="flex-row">
                <!--嘻嘻嘻-->
								<div class="flex-col-6 product3" v-for="list in cowryListByTwo" :key="list.id">
									<img :src="'/src/' + list.imgPath" style="width:200px; height:170px"/>
									<h3 class="title">{{ list.name }}</h3>
									<span class="price">RMB:99.99</span>
									<del class="text-muted">100.00</del>
								</div>

							</div>

						</div>
					</div>
				</div>
			</main>
		</body>
</div>
  <div>
    <el-dialog :title="'搜索的关键词：' + keyword"
               v-model="dialogVisible" width="30%">
      <div class="flex-row">
        <div class="flex-col-12" v-for="list in searchCowries" :key="list.id">
          <div class="effect2">
            <div class="box3" style="text-align: center">
              <div class="box3-image">
                <img :src="'/src/' + list.imgPath" style="width: 200px; height: 200px">
              </div>
              <div class="box3-info">
                <div class="title" v-html="list.name"></div>
                <div class="price">RMB：<span style="color: red">{{ list.price }}</span></div>
                <!--<del class="text-muted">100.00</del>-->
                <p class="brief" @click="addItem(list)"><a>加入购物车</a></p>
                <p class="shop-name brief" @click="addItem(list)"><a>立即下单</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div  style="text-align: center"><el-empty v-if="searchNull === 0" description="description" /></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";

  export default {
    data(){
      return{
        cowryListByOne: [],
        cowryListByTwo: [],
        dialogVisible: false,
        keyword: '',
        searchCowries: [],
        searchNull: 0,
        fullscreenLoading: false,
      }
    },
    created() {
      this.listOne();
      this.listTwo();
    },
    watch: {
      keyword(newVal, oldVal){

      }
    },
    methods: {
      listOne(){
        request.get("/api/cowryList",{
          params:{
            status: 1
          }
        }).then(
            res => {
              // console.log("res=", res.data)
              if (res.code === "200"){
                this.cowryListByOne = res.data
              }
              console.log(this.cowryListByOne)
              if (res.code === "555"){
                ElMessage({
                  message: '请求数据失败',
                  type: 'error',
                })
              }
            }
        )
      },
      listTwo(){
        request.get("/api/cowryList",{
          params:{
            status: 2
          }
        }).then(
            res => {
              if (res.code === "200"){
                this.cowryListByTwo = res.data
              }
              if (res.code === "555"){
                ElMessage({
                  message: '请求数据失败',
                  type: 'error',
                })
              }
            }
        )
      },
      search(keyword){
        this.fullscreenLoading = true;
        // this.dialogVisible = true;
        // console.log("keyword=", keyword);
        request.get("/api/searchByName", {
          params: {
            keyword: keyword
          }
        }).then(
            res => {
              // console.log("res=", res.data);
              if (res.code === "200"){
                this.fullscreenLoading = false;
                this.searchCowries = res.data;
                this.dialogVisible = true;
                // console.log("searchCowries=", this.searchCowries);
                this.searchNull = 1;
              }
              if (res.code === "555"){
                this.fullscreenLoading = false;
                this.searchNull = 0;
                this.searchCowries = '';
                this.dialogVisible = true;
                ElMessage({
                  message: '查不到该商品',
                  type: 'warning',
                })
              }
          }
        )
      },
      addItem(cowryItem){
        // console.log("cowry=", cowryItem);
        request.post("/api/addCartItem", cowryItem).then(
            res => {
              // console.log("res=", res);
              if (res.code === '200'){
                ElMessage({
                  message: res.msg,
                  type: 'success',
                })
              }else {
                ElMessage({
                  message: '添加失败',
                  type: 'error',
                })
              }
            }
        )
      }
    }
  }
</script>

<style>
  em{
    color: #bd2c00;
    font-size: 18px;
  }
  .brief a:hover{
    background-color: #f1ebe2;
    border-radius: 5px;
    cursor: pointer;
  }
</style>